<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
    <link href="./css/footer.css" rel="stylesheet">
    <style>
    </style>
</head>

<body>
    <div id="app">

        <nav class="nav">
            <a class="goback" href="javascript:history.back(1)"></a>
            游客注册
            <a href="#" class="more"></a>
        </nav>
        <section>
            <div>
                <input v-model="list.memberPhone" class="phone" placeholder="请输入您的手机号" id="memberPhone">
                <input v-model="list.email" class="email" placeholder="请输入您的邮箱" id="email">
                <input v-model="list.name" class="name" placeholder="请输入您的名字" id="name">
                <input v-model="list.password" class="password" placeholder="请设置密码（6-18位数字和字母组合）" id="password"
                    type="password" required>
                <input v-model="aspassword" class="password" placeholder="请确认密码" id="rePassword" type="password"
                    required>
            </div>
            <div v-if="msg!=''" style="margin: auto;text-align: center;width: 100%;height: 60px;line-height: 60px;">
                {{msg}}
            </div>

            <div>
                <button id="login" @click="reig">注册</button>
            </div>
            <div>
                <a class="reg" href="#">登录</a>
                <a class="forgetPassword" href="#">忘记密码</a>
            </div>
        </section>
        <footer>
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li>回首页</li>
            </ul>
            <div class="copyright">&copy;同程旅游</div>
        </footer>
    </div>

</body>

</html>

<script src="./js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            list: {
                memberPhone: "",
                password: "",
                name: "",
                email: ""
            },
            aspassword: "",
            msg: ""
        },
        methods: {
            reig() {
                var that = this
                //密码格式判断
                var ploneType = /^[1][0-9]{10}$/
                var paswderType = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/

                if (that.list.memberPhone == "" || !ploneType.test(that.list.memberPhone)) {
                    that.msg = "手机号码未输入或者格式不正确"
                    return false
                }

                if (that.list.email == "" || that.list.email.indexOf("@") == -1) {
                    that.msg = "邮箱为空或者格式不正确需要包含@符号"
                    return false
                }

                if (that.list.name == "") {
                    that.msg = "用户名未输入"
                    return false
                }

                if (that.list.password == "" || !paswderType.test(that.list.password)) {
                    that.msg = "密码为空或者密码格式不正确"
                    return false
                }



                if (that.aspassword != that.list.password) {
                    that.msg = "重复密码不正确"
                    return false
                }


                axios.post("http://localhost:8080/h10/travel/addMember", that.list)
                    .then(res => {
                        console.log(res);
                        if (res.status == 200 && res.data.success) {
                            confirm("注册成功")
                        }
                    })


            }
        }
    })

</script>